<template>
    <div class="demo-date-picker">
        <div class="block">
            <el-date-picker
                v-model="value2"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="Start date"
                end-placeholder="End date"
                :shortcuts="shortcuts"
                :size="size"
                :default-time="defaultTime"
            />
        </div>
        <!-- <button @click="testfn">test</button> -->
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import axios from 'axios'

const emit = defineEmits(['someEvent'])

// const defaultTime = ref<[Date, Date]>([
//   new Date(2023, 1, 20, 0, 0, 0),
//   new Date(2023, 1, 27, 0, 0, 0),
// ])

const testfn = ()=>{
    value2.value = [
        // dDateA,
        // dDateB
        // 'Mon Feb 20 2023 00:00:00 GMT+0800 (中国标准时间)',
        // 'Mon Feb 27 2023 00:00:00 GMT+0800 (中国标准时间)',
        new Date(2023,1,20),
        new Date(2023,1,27),
    ]
}
setTimeout(() => {
    testfn()
}, 300)
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// const dDateA = new Date('Mon Feb 20 2023 00:00:00 GMT+0800 (中国标准时间)')
// const dDateB = new Date('Mon Feb 27 2023 00:00:00 GMT+0800 (中国标准时间)')

onMounted(() => {
    
    // value2.value = [
    //     dDateA,
    //     dDateB
    //     // 'Mon Feb 20 2023 00:00:00 GMT+0800 (中国标准时间)',
    //     // 'Mon Feb 27 2023 00:00:00 GMT+0800 (中国标准时间)',
    //     // new Date(2023,1,20),
    //     // new Date(2023,1,27),
    // ]
    getAllOrder()
})
// 需要显示的数组
const dateList = ref([])

const orderList = ref([])
// 获取所有订单信息
const getAllOrder = async () => {
    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/goods/orderlist',
        //post请求参数使用data选项, get参数 params选项
        params: {
            pageSize: 1000,
        },
    })
    const { code, info } = res.data
    if (code === 1) {
        orderList.value = info.list.map(i => {
            return {
                date: i.date,
                date_s: i.date_s,
                total_price: i.total_price,
            }
        })
    }
    // console.log('orderList.value>>>',orderList.value)
}

const size = ref('default')

// 选中的时间
const value2 = ref([])

watch(
    value2,
    (newValue, oldValue) => {
        // 立即执行，且当 `value2` 改变时再次执行
        // console.log(typeof value2.value[0])
        // console.log(value2.value[0])

        let date1 = new Date(value2.value[0])
        let date2 = new Date(value2.value[1])
        console.log('date1>>>',date1)
        console.log('date2>>>',date2)
        dateList.value = orderList.value.filter(item => {
            return (
                new Date(item.date_s) < date2 && new Date(item.date_s) > date1
            )
        })
        dateList.value.map(item => {
            item.num = 1
            return item
        })
        console.log('dateList.value>>>', dateList.value)

        let newArray = dateList.value.reduce((total, cur, index) => {
            let hasValue = total.findIndex(current => {
                return current.date.split(' ')[0] === cur.date.split(' ')[0]
            })
            hasValue === -1 && total.push(cur)
            hasValue !== -1 &&
                (total[hasValue].total_price =
                    total[hasValue].total_price + cur.total_price)
            hasValue !== -1 &&
                (total[hasValue].num = total[hasValue].num + cur.num)
            return total
        }, [])
        // console.log(newArray)
        let arr1 = []
        let arr2 = []
        let arr3 = []
        newArray.map(item=>{
            arr1.push(item.date.split(' ')[0])
            arr2.push(item.total_price)
            arr3.push(item.num)
        })

        // let date3 = new Date(dateList.value[0]?.date_s)
        // let year = date3.getFullYear() // 年
        // let month = date3.getMonth() + 1 // 月
        // let day = date3.getDate() // 日
        // console.log(year + '-' + month + '-' + day)

        emit('someEvent', [arr1,arr2,arr3])
    },
    { immediate: true }
)

const shortcuts = [
    {
        text: '一周内订单',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '一个月内订单',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: '三个月内订单',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]
</script>

<style scoped>
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    position: relative;
    top: 25px;
    text-align: right;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>
